<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <label for="">性别:</label>
            {{sex | formatterSex | formatterSex2}}

            <p>{{now | formatterDate('-') }}</p>
        </div>

        <script src="../vue.js"></script>
        <script>
            //  filter: 过滤器, | 管道符
            new Vue({
                el: '#app',
                data() {
                    return {
                        sex: 750,
                        now: '2021/5/23', // 2021-05-23
                    };
                },
                filters: {
                    formatterSex(val) {
                        if (val === 750) {
                            return '男';
                        } else if (val === 760) {
                            return '女';
                        } else if (val !== 750 && val !== 760) {
                            return '未知';
                        }
                        // console.log(111);
                        // return
                    },
                    formatterSex2(val) {
                        if (val === '男') {
                            return '男性';
                        } else if (val === '女') {
                            return '女性';
                        }
                        console.log(val);
                    },
                    formatterDate(val, str) {
                        let expReg = /\//g,
                            str2 = val.replace('/', '-').replace('/', '-'),
                            arr = str2.split('-'),
                            // padEnd padStart
                            str3 = arr[1].padStart(2, '0');
                        // if(str3.length<2){ 
                        // if ('5' < 10) {
                        //     str3 = '0' + str3;
                        // }
                        return `${arr[0]}-${str3}-${arr[2]}`;

                        // console.log(typeof str2);
                        // return val.replace('/', '-').replace('/', '-');
                        // return val.replace(expReg, str);
                        // console.log(val); //
                        // console.log(str); // '-'
                    },
                },
            });
        </script>
    </body>
</html>
